<template>
	<view :style="{'height': screenHeight+'px'}">
		<!-- 下载进度 -->
		<view class="dowmPros" :style="{'top':(screenHeight/2)+'px'}" v-show="down">
			<view class="num">{{downPro}}%</view>
			<view class="progress">
				<view :style="{'width':(downPro)+'%'}"></view>
			</view>
		</view>
		<view class="fanhui" @click="TopBack">
			<i class="iconfont iconfanhui-copy"></i>
		</view>
		<swiper class="swiper" :duration="duration" :vertical="true" @change="onChange" :current="activeIndex">
			<swiper-item v-for="(item,index) in dataList" :key="index">
				<view class="swiper-item" v-if="activeIndex >= (index-1)">
					<image :src="item.img_url" mode="aspectFill"></image>
					<image :src="item.img_url" mode="aspectFit"></image>
					<view class="info-box">
						<view class="uni-flex uni-row" style="align-items: center;">
							<view>
								<image class="imgHead" v-if="personInfo" :src="personInfo.avatar?personInfo.avatar:'../../static/images/login/logo.png'" mode="aspectFill"></image>
							</view>
							<view class="imgTitle" v-if="personInfo">{{personInfo.nicheng?personInfo.nicheng:'未设置昵称'}}</view>
						</view>
						<view class="dess">
							<view>{{item.title == 'null '?'无':item.title}}</view>
							<view class="imgDes" @click="photoDesOpen(item)" v-show ="item.title!='null '">展开</view>
						</view>
					</view>
					<view class="sidebar">
						<view class="like">
							<uni-icons type="chat-filled" :color="item.readnum>0?'#FF1493':'#fff'" size="30"
								@click="read(index)"></uni-icons>
							<view>{{commentNum?commentNum:item.commentnum}}</view>
						</view>
						<view class="like">
							<uni-icons type="heart-filled" :color="item.is_like==2?'#FF1493':'#fff'" size="30"
								@click="like(index)"></uni-icons>
							<view>{{item.likenum}}</view>
						</view>
						<view class="read">
							<uni-icons type="redo-filled" :color="item.sharenum>0?'#FF1493':'#fff'" size="30"
								@click="share(index)"></uni-icons>
							<view>{{item.sharenum}}</view>
						</view>
					</view>
				</view>
			</swiper-item>
		</swiper>
		<!-- 分享弹窗 -->
		<uni-popup id="popupShare" ref="popupShare" type="share">
			<view class="uni-flex uni-row share"
				style="background-color: #fff;height: 102rpx;align-items: center;border-radius: 32rpx 32rpx 0 0;">
				<view class="closeShare">
					<i class="iconfont iconcuo" @click="closeShare"></i>
				</view>
			</view>
			<view class="uni-flex uni-row"
				style="background-color: #FFFFFF;padding-top: 50rpx;display: flex;align-items: center;justify-content: space-around;text-align: center;padding-bottom: 32px;">
				<view @click="onOpenContactClick">
					<image src="../../static/images/sixin.png" class="downImg"></image>
					<view style="margin-top: 20rpx;">私信好友</view>
				</view>
				<view @click="downImg">
					<image src="../../static/images/down.png" class="downImg"></image>
					<view style="margin-top: 20rpx;">下载保存</view>
				</view>
				<view @click="forward" v-show="false">
					<image src="../../static/images/zhuanfa.png" class="downImg"></image>
					<view style="margin-top: 20rpx;">转发</view>
				</view>
				<view @click="weixin">
					<image src="../../static/images/wecat.png" class="downImg"></image>
					<view style="margin-top: 20rpx;">微信</view>
				</view>
				<view @click="report">
					<image src="../../static/images/jubao.png" class="downImg"></image>
					<view style="margin-top: 20rpx;">举报</view>
				</view>
			</view>
		</uni-popup>
		<!-- 转发弹窗 -->
		<uni-popup id="popupForward" ref="popupForward" type="share">
			<view class="uni-flex uni-row share" style="background-color: #fff;height: 120rpx;align-items: center;">
				<view
					style="-webkit-flex: 1;flex: 1;margin-left: 20rpx;text-align: left;color: #999999;font-weight: bold;font-size: 28rpx;">
					转发并评论 // @*******
				</view>
				<view class="text" style="-webkit-flex: 1;flex: 1;margin-right: 30rpx;">
					<i class="iconfont iconcuo"
						style="color: #DCDFE6;font-size: 40rpx;background-color: #F4F7FC;border-radius: 100rpx;"
						@click="closeForward"></i>
				</view>
			</view>
			<view class="uni-flex uni-column" style="background-color: #FFFFFF;">
				<view>
					<view class="uni-input-wrapper foll">
						<input class="uni-input"
							style="width: 690rpx;height: 80rpx;margin: 0rpx auto;background-color: #FAFAFA;margin-bottom: 40rpx;border-radius: 40rpx;"
							focus placeholder="请输入留言内容" />
					</view>
				</view>
			</view>
		</uni-popup>
		<!-- 微信分享弹窗 -->
		<uni-popup id="popupWX" ref="popupWX" type="share">
			<view class="uni-flex uni-row share" style="background-color: #fff;height: 120rpx;align-items: center;">
				<view style="-webkit-flex: 1;flex: 1;">

				</view>
				<view class="text" style="-webkit-flex: 1;flex: 1;margin-right: 30rpx;">
					<i class="iconfont iconcuo"
						style="color: #DCDFE6;font-size: 40rpx;background-color: #F4F7FC;border-radius: 100rpx;"
						@click="closeWX"></i>
				</view>
			</view>
			<view class="uni-flex uni-column" style="background-color: #FFFFFF;height: 280rpx;">
				<view class="WXshareNum">
					{{downShare}}%
				</view>
				<view class="WXshares">
					<view class="WXshare" :style="{'width':downShare+'%'}"></view>
				</view>
			</view>
		</uni-popup>
		<!-- 评论弹窗 -->
		<uni-popup id="popupRead" ref="popupRead" type="share">
			<view class="uni-flex uni-row share">
				<view style="-webkit-flex: 1;flex: 1;margin-left: 20rpx;">

				</view>
				<view class="commentNumb">
					共{{commentNum}}条评论
				</view>
				<view class="text" style="-webkit-flex: 1;flex: 1;margin-right: 30rpx;">
					<i class="iconfont iconcuo"
						style="color: #DCDFE6;font-size: 40rpx;background-color: #F4F7FC;border-radius: 100rpx;"
						@click="closeRead"></i>
				</view>
			</view>
			<view class="uni-flex uni-column" style="background-color: #fff;border-top: 2rpx solid #DCDFE6;">
				<view :style="{height: commentHeight+'rpx'}">
					<scroll-view :scroll-top="scrollTop" scroll-y="true" @scrolltoupper="upper" @scrolltolower="lower" @scroll="scroll">
						<view id="demo1" class="scroll-view-item" v-if="commentData.length!=0">
							<view v-for="(item,index) in commentData" :key="index">
								<view class="uni-flex uni-row" style="margin: 30rpx 30rpx 32rpx 28rpx;">
									<view>
										<image @click="person(item)" :src="item.avatar?item.avatar:'../../static/images/login/logo.png'" style="width: 64rpx;height: 64rpx;border-radius: 100rpx;"></image>
									</view>
									<view class="uni-flex uni-column"
										style="width: 100%;border-bottom:2rpx solid #FAFAFA;">
										<view style="margin: 0rpx 10rpx 12rpx 18rpx;font-size: 24rpx;text-align: left;">
											<text style="margin-right: 10rpx;">{{item.users_name?item.users_name:'未设置昵称'}}</text>
											<text style="background-color: #EEEEEE;font-size: 20rpx;color: #999999;font-weight: bold;padding: 6rpx;border-radius: 50rpx;" v-if="userId == item.user_id">作者</text>
										</view>
										<!-- 一级评论 -->
										<view @click="sendCommentLv2(item)"
											style="text-align: left;margin: 0rpx 10rpx 32rpx 18rpx;">
											{{item.reply_text}}
										</view>
										<view v-if="item.answer.length!=0">
											<view class="uni-flex uni-row" style="margin: 0rpx 30rpx 0rpx 18rpx;"
												v-if="item.answer.length == 1">
												<view>
													<image @click="person(item)" :src="item.answer[0].avatar?item.answer[0].avatar:'../../static/images/login/logo.png'" style="width: 64rpx;height: 64rpx;border-radius: 100rpx;"></image>
												</view>
												<view class="uni-flex uni-column" style="width: 100%;">
													<view style="margin: 0rpx 10rpx 12rpx 18rpx;font-size: 24rpx;text-align: left;">
														<text style="margin-right: 5px;">{{item.answer[0].users_name?item.answer[0].users_name:'未设置昵称'}}</text>
														<text style="background-color: #EEEEEE;font-size: 20rpx;color: #999999;font-weight: bold;padding: 6rpx;border-radius: 50rpx;" v-if="userId == item.user_id">作者</text>
													</view>
													<!-- 二级评论 -->
													<view style="text-align: left;margin: 0rpx 10rpx 32rpx 18rpx;" @click="sendCommentLv3(item,item.answer[0])">
														{{item.answer[0].reply_text}}
													</view>
												</view>
											</view>
											<view class="uni-flex uni-row" style="margin: 0rpx 30rpx 0rpx 18rpx;"
												v-if="item.answer.length > 1" v-show="item.readShow">
												<view>
													<image @click="person(item)" :src="item.answer[0].avatar?item.answer[0].avatar:'../../static/images/login/logo.png'" style="width: 64rpx;height: 64rpx;border-radius: 100rpx;"></image>
												</view>
												<view class="uni-flex uni-column" style="width: 100%;">
													<view style="margin: 0rpx 10rpx 12rpx 18rpx;font-size: 24rpx;text-align: left;">
														<text style="margin-right: 5px;">{{item.answer[0].users_name?item.answer[0].users_name:'未设置昵称'}}</text>
														<text style="background-color: #EEEEEE;font-size: 20rpx;color: #999999;font-weight: bold;padding: 6rpx;border-radius: 50rpx;" v-if="userId == item.answer[0].user_id">作者</text>
													</view>
													<!-- 二级评论回复 -->
													<view style="text-align: left;margin: 0rpx 10rpx 32rpx 18rpx;" @click="sendCommentLv3(item,item.answer[0])">
														{{item.answer[0].reply_text}}
													</view>
												</view>
											</view>
											<view class="uni-flex uni-row" v-for="(item2,index2) in item.answer" :key="index2" style="margin: 0rpx 30rpx 0rpx 18rpx;" v-if="item.answer.length > 1&&item2.answer_id == 0" v-show="!item.readShow">
												<view>
													<image @click="person(item)" :src="item2.avatar?item2.avatar:'../../static/images/login/logo.png'" style="width: 64rpx;height: 64rpx;border-radius: 100rpx;"></image>
												</view>
												<view class="uni-flex uni-column" style="width: 100%;">
													<view style="margin: 0rpx 10rpx 12rpx 18rpx;font-size: 24rpx;text-align: left;">
														<text style="margin-right: 10rpx;">{{item2.users_name?item2.users_name:'未设置昵称'}}</text>
														<text style="background-color: #EEEEEE;font-size: 20rpx;color: #999999;font-weight: bold;padding: 6rpx;border-radius: 50rpx;" v-if="userId == item2.user_id">作者</text>
													</view>
													<view style="text-align: left;margin: 0rpx 10rpx 32rpx 18rpx;" @click="sendCommentLv3(item,item2)">
														{{item2.reply_text}}
													</view>
												</view>
											</view>
											<view class="uni-flex uni-row" v-for="(item2,index2) in item.answer" :key="index2" style="margin: 0rpx 30rpx 0rpx 18rpx;" v-if="item.answer.length > 1&&item2.answer_id != 0" v-show="!item.readShow">
												<view>
													<image @click="person(item)" :src="item2.avatar?item2.avatar:'../../static/images/login/logo.png'" style="width: 64rpx;height: 64rpx;border-radius: 100rpx;"></image>
												</view>
												<view class="uni-flex uni-column" style="width: 100%;">
													<view style="margin: 0rpx 10rpx 12rpx 18rpx;font-size: 24rpx;text-align: left;">
														<text style="margin-right: 10rpx;">{{item2.users_name?item2.users_name:'未设置昵称'}}</text>
														<text style="background-color: #EEEEEE;font-size: 20rpx;color: #999999;font-weight: bold;padding: 6rpx;border-radius: 50rpx;" v-if="userId == item2.user_id">作者</text>
													</view>
													<view style="text-align: left;margin: 0rpx 10rpx 32rpx 18rpx;" @click="sendCommentLv3(item,item2)">回复{{item2.users_name2?item2.users_name2:'未设置昵称'}}:{{item2.reply_text}}
													</view>
												</view>
											</view>
											<view @click="moreReport(index)" v-show="item.readShow&&item.answer.length>1." class="moreComment">展开{{item.answer_num}}条回复</view>
											<view @click="moreReport(index)" v-show="!item.readShow" class="moreComment">收起</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
				<view class="uni-input-wrapper">
					<view class="uni-flex uni-row">
						<view class="text" style="-webkit-flex: 1;flex: 1;">
							<input class="uni-input commentip" v-model="comment" v-show="inpblu1" placeholder="说点什么吧" @focus="smallKey" @blur="smallKey2" :auto-blur="true" />
							<input class="uni-input commentip" v-model="comment2" v-show="inpblu2" :focus="inpblu2" v-if="commentUser!=null" :placeholder="'回复:'+commentUser.users_name"  @focus="smallKey3" @blur="smallKey4" :auto-blur="true"/>
							<input class="uni-input commentip" v-model="comment3" v-show="inpblu3" :focus="inpblu3" v-if="commentUser!=null" :placeholder="'回复:'+commentUser2.users_name"  @focus="smallKey5" @blur="smallKey6" :auto-blur="true"/>
						</view>
						<view>
							<button class="mini-btn sendBtn" size="mini" @click="sendComment">回复</button>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<!-- 相片描述弹窗 -->
		<uni-popup id="popupOpen" ref="popupOpen" type="share">
			<view class="uni-flex uni-row share" style="background-color: #fff;height: 90rpx;align-items: center;border-radius: 32rpx 32rpx 0 0;">
				<view class="closeShare">
					<i class="iconfont iconcuo" @click="photoDesClose"></i>
				</view>
			</view>
			<view class="openDes" :style="{'width': screenWidth+'px'}">
				<view>{{photoDesOpenTitle}}</view>
			</view>
		</uni-popup>
	</view>
	<!-- <view class="content">
		<image mode="widthFix" class="imag" :src="albumArr[albumItem-1].albumDetailed[albumDeItem].albumDetailedPath" @click="clickImg"></image>
	</view> -->
</template>

<script>
	import uniIcons from '@/components/uni-icons/uni-icons'
	export default {
		data() {
			return {
				screenHeight: 0, //屏幕高度
				screenWidth:0,	//屏幕宽度
				// 抖音插件//////////////////////////////////////////
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				listType: 1,
				activeIndex: 0,
				duration: 300,
				////////////////////////////////////////////////////
				comment: null, //要发送的评论
				comment2: null, //要发送的二级评论
				comment3: null, //要发送的三级评论
				// albumArr:null,		//选中的相册与相册内容
				rows: 10,
				dataList: [],
				imgList:[],		//图片列表
				num:0,				//点赞图片下标
				albumIndex:null,	//当前相册下标
				albumArr:null,		//相册列表
				commentIndex:0,	//评论当前图片的下标
				commentData:[],	//评论列表数据
				userMsg:null,		//登录信息
				pages:1,
				pagesize:8,
				commentInput:1,		//发送评论的输入框
				commentUser:null,		//要回复的用户的信息
				commentUser2:null,
				commentNum:0,		//评论条数
				onChangeNum:0,		//图片滑动监听下标
				albumId:null,		//相册id
				scrollIndex:0,		//滑动监听下标
				userInfo: uni.getStorageSync('userInfo'),
				imgIndex:0,
				downPro:0,			//下载进度
				down:false,			//下载进度提示
				downShare:0,		//分享进度
				photoDesOpenTitle:null,		//相片描述展开内容
				commentHeight:960	,//评论弹窗高度
				videoId:0,
				personInfo:null,
				userId:0,			//用户ID
				top:0		,//1从更多相册进来 2从主页进来
				inpblu1:true,
				inpblu2:false,
				inpblu3:false,
			}
		},
		onLoad(option) {
			console.log('option1',option);
			if (option.type == 'homePage') {
				this.albumId = option.albumId
				this.videoId = option.videoId
				if(option.personInfo){
					this.personInfo = JSON.parse(option.personInfo)
					console.log(this.personInfo);
				}
				this.userId = option.userId
				console.log('userId',this.userId);
				var item = JSON.parse(decodeURIComponent(option.imgItem));
				this.imgList.push(item);
				this.getList();
			} else {
				if(option.personInfo){
					this.personInfo = JSON.parse(option.personInfo)
					console.log(this.personInfo);
				}
				console.log('option', option)
				this.userId = option.userId
				this.albumId = option.albumId
				this.imgIndex = option.imgIndex
				this.imgArr()
				this.getList();
				this.userInfo = uni.getStorageSync('userInfo')
				this.scrollIndex = this.imgIndex
			}
			console.log('personInfo',this.personInfo);
		},
		onNavigationBarButtonTap(item) {

		},
		onBackPress() {

		},
		mounted() {
			/* uni.setStorageSync('num',this.num) */
		},
		onReady() {
			let phone = uni.getSystemInfoSync()
			this.screenHeight = phone.screenHeight
			this.screenWidth = phone.screenWidth
		},
		methods: {
			imgArr() {
				let resData = {
					page: 1,
					pagesize: 20,
					album_id: this.albumId,
				}
				console.log('imgArrresData',resData);
				this.$api.apiPost('user/video.Photo/listsImg', resData).then(res => {
					const DATA = res.data
					if (DATA.code == 200) {
						if(this.videoId!=0){
							for (var i = 0; i < DATA.data.data.img_list.length; i++) {
								if(DATA.data.data.img_list[i].video_id == this.videoId){
									this.imgList.push(DATA.data.data.img_list[i])
								}
							}
							console.log('排序',this.imgList)
							this.commentNum = this.imgList[0].commentnum
						}else{
							for (var i = this.scrollIndex; i < DATA.data.data.img_list.length; i++) {
								this.imgList.push(DATA.data.data.img_list[i])
							}
							for (var i = 0; i < this.scrollIndex; i++) {
								this.imgList.push(DATA.data.data.img_list[i])
							}
							this.commentNum = this.imgList[this.commentIndex].commentnum
						}
						console.log('评论数',this.commentNum);
					}
				})
				console.log('排序',this.imgList)
			},
			/* 保存图片 */
			downImg() {
				console.log('下载图片', this.imgList[this.commentIndex].img_url)
				this.down = true
				const downloadTask = uni.downloadFile({
					url: this.imgList[this.commentIndex].img_url, //图片路径
					success: (res) => {
						if (res.statusCode === 200) {
							this.down = false
							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath,
								success: function() {
									uni.showToast({
										icon: 'none',
										title: '已保存至相册',
										duration: 2000
									});
								}
							});
							this.downPro = 0
							console.log('下载成功');
						}
					}
				})
				downloadTask.onProgressUpdate((res) => {
					this.downPro = res.progress
					console.log('下载进度', this.downPro)
				});
				this.closeShare()
			},
			/* 评论列表 */
			commentList(index) {
				this.commentIndex = index
				let resData = {
					page: this.pages,
					pagesize: this.pagesize,
					video_id: this.imgList[index].video_id
				}
				console.log(resData);
				this.$api.apiPost('user/video.Lists/listsReply', resData).then(res => {
					const DATA = res.data
					if (DATA.code == 200) {
						for (let i = 0; i < DATA.data.data.length; i++) {
							DATA.data.data[i].readShow = true
							this.commentData.push(DATA.data.data[i])
						}
						for (var i = 0; i < this.commentData.length; i++) {
							if(this.commentData[i].answer.length!=0){
								for (var j = 0; j < this.commentData[i].answer.length; j++) {
									for (var k = 0; k < this.commentData[i].answer.length; k++) {
										if(this.commentData[i].answer[j].video_reply_id == this.commentData[i].answer[k].answer_id){
											this.commentData[i].answer[k].users_name2 = this.commentData[i].answer[j].users_name
										}
									}
								}
								
							}
						}
						console.log('评论列表',this.commentData);
					} else {
						uni.showToast({
							icon:'none',
							title: '没有更多了'
						});
					}
				})
			},
			/* 发送评论 */
			sendComment() {
				this.pages = 1
				console.log('commentInput',this.commentInput);
				if (this.commentInput == 1) {
					console.log('要发送的评论', this.comment)
					console.log('video_id',this.imgList[this.commentIndex].video_id);
					console.log('imgList',this.imgList);
					if (this.comment) {
						let resData = {
							video_id:this.imgList[this.commentIndex].video_id,
							text:this.comment
						}
						console.log(resData)
						uni.showLoading({
							title: '请稍候',
							mask: true
						})
						this.$api.apiPost('user/video.Lists/addReply', resData).then(res => {
							console.log(res)
							if (res.data.code == 200) {
								console.log('评论成功', res)
								uni.hideLoading()
								uni.showToast({
									title: '评论成功',
									duration: 2000
								})
								// console.log(this.commentIndex)
								this.commentData = []
								this.commentList(this.commentIndex)
								this.imgList = []
								this.imgArr()
								console.log('imgList',this.imgList);
								this.comment = null
								this.inpblu1 = true
								this.inpblu2 = false
								this.inpblu3 = false
								this.commentInput == 1
							}
						})
					} else {
						uni.showToast({
							icon: 'none',
							title: '评论不能为空',
							duration: 2000
						})
					}
				} else if (this.commentInput == 2) {
					this.pages = 1
					console.log('commentInput',this.commentInput);
					console.log('要发送的评论', this.comment2)
					if (this.comment2) {
						console.log('要回复的人的信息', this.commentUser)
						let resData = {
							video_id: this.imgList[this.commentIndex].video_id,
							pid: this.commentUser.video_reply_id,
							text: this.comment2
						}
						console.log('resData', resData)
						uni.showLoading({
							title: '请稍后',
							mask: true
						})
						this.$api.apiPost('user/video.Lists/addReply', resData).then(res => {
							console.log(res)
							if (res.data.code == 200) {
								console.log('评论成功', res)
								uni.hideLoading()
								uni.showToast({
									title: '评论成功',
									duration: 2000
								})
								this.commentData = []
								this.commentList(this.commentIndex)
								this.imgList = []
								this.imgArr()
								this.comment2 = null
								this.inpblu1 = true
								this.inpblu2 = false
								this.inpblu3 = false
								this.commentInput == 1
							}
						})
					} else {
						uni.showToast({
							icon: 'none',
							title: '评论不能为空',
							duration: 2000
						})
					}
				}else if(this.commentInput == 3){
					this.pages = 1
					console.log('commentInput',this.commentInput);
					console.log('要发送的评论',this.comment3)
					if(this.comment3){
						console.log('要回复的人的信息3',this.commentUser)
						let resData = {
							video_id:this.imgList[this.commentIndex].video_id,
							answer_id:this.commentUser2.video_reply_id,
							pid:this.commentUser.video_reply_id,
							text:this.comment3
						}
						console.log('resData', resData)
						uni.showLoading({
							title: '请稍后',
							mask: true
						})
						this.$api.apiPost('user/video.Lists/addReply', resData).then(res => {
							console.log(res)
							if (res.data.code == 200) {
								console.log('评论成功', res)
								uni.hideLoading()
								uni.showToast({
									title: '评论成功',
									duration: 2000
								})
								this.commentData = []
								this.commentList(this.commentIndex)
								this.imgList = []
								this.imgArr()
								this.comment3 = null
								this.inpblu1 = true
								this.inpblu2 = false
								this.inpblu3 = false
								this.commentInput == 1
							}
						})
					} else {
						uni.showToast({
							icon: 'none',
							title: '评论不能为空',
							duration: 2000
						})
					}
				}
			},
			/* 发送二级评论 */
			sendCommentLv2(item) {
				console.log('1要回复的人的信息', item)
				this.commentUser = item
				this.commentInput = 2
				this.inpblu2 = true
				this.inpblu1 = false
				this.inpblu3 = false
			},
			/* 发送三级评论 */
			sendCommentLv3(item1,item2){
				console.log('2要回复的人的信息item1',item1)
				console.log('2要回复的人的信息item2',item2)
				this.commentUser = item1
				this.commentUser2 = item2
				this.commentInput = 3
				this.inpblu3 = false
				setTimeout(() => {
					this.inpblu3 = true
				},0)
				this.inpblu1 = false
				this.inpblu2 = false
			},
			/* 点赞/取消点赞 */
			clickLike(index) {
				let resData = {
					video_id: this.imgList[index].video_id,
				}
				if(this.imgList[index].is_like == 2){
					resData.is_like = 1
				}else if(this.imgList[index].is_like == 1){
					resData.is_like = 2
				}else if(this.imgList[index].is_like == null){
					resData.is_like = 2
				}
				console.log('resData',resData);
				this.$api.apiPost('user/video.Lists/isLike', resData).then(res => {
					const DATA = res.data
					console.log('DATA',DATA);
					if (DATA.code == 200) {
						console.log(this.dataList[index]);
						if(this.dataList[index].is_like == 2){
							this.dataList[index].likenum--
							this.dataList[index].is_like = 1
						}else{
							this.dataList[index].likenum++
							this.dataList[index].is_like = 2
						}
						
						/* if(this.imgList[index].is_like == 2){
							this.imgList[index].is_like = 1
						}else if(this.imgList[index].is_like == 1){
							this.imgList[index].is_like = 2
						} */
						/* if (is_like == 2) {
							console.log('点赞')
							this.imgList[index].likenum = 1
							console.log('likenum', this.imgList[index].likenum)
						} else if (is_like == 1) {
							console.log('取消点赞')
							this.imgList[index].likenum = 0
							console.log('likenum', this.imgList[index].likenum)
						} */
					}
				})
			},
			/* 图片点赞 */
			like(index) {
				if (index < this.imgList.length) {
					console.log('index', index)
					console.log('video_id', this.imgList[index])
					console.log('图片列表', this.imgList[index])
					console.log('dataList', this.dataList[index])
					this.clickLike(index)
				} else if (index >= this.imgList.length) {
					/* this.num为图片下标，index不可用 */
					if (index % this.imgList.length == 0) {
						console.log('余数', index)
						this.num = index
					}
					console.log('num', this.num)
					console.log('index', index)
					console.log('index---', index - this.num)
					console.log('page', this.page - 1)
					if (this.dataList[index].likenum > 0) {
						this.clickLike(index - this.num)
					} else {
						this.clickLike(index - this.num)
					}
				}
			},
			/* 举报跳转 */
			report() {
				console.log('举报')
				console.log(this.imgList[this.scrollIndex].video_id)
				uni.navigateTo({
					url: "/pages/album/album-report?videoId=" + this.imgList[this.scrollIndex].video_id,
				})
				this.closeShare()
			},
			/* 打开评论弹窗 */
			read(index) {
				console.log('评论')
				console.log(index-this.num);
				this.commentData = []
				this.commentList(index-this.num)
				this.commentNum = this.imgList[index-this.num].commentnum
				this.$refs.popupRead.open()
			},
			/* 关闭评论弹窗 */
			closeRead() {
				console.log('关闭评论')
				this.imgList = []
				this.imgArr()
				this.$refs.popupRead.close()
			},
			/* 打开分享弹窗 */
			share(index) {
				console.log('分享')
				this.commentIndex = index - this.num
				console.log(this.commentIndex)
				/* uni.setStorageSync('commentIndex',this.commentIndex) */
				this.$refs.popupShare.open()
			},
			/* 关闭分享弹窗 */
			closeShare() {
				console.log('关闭分享')
				this.$refs.popupShare.close()
			},
			back() {
				console.log('getCurrentPages', getCurrentPages())
				/* uni.navigateBack({
				    delta: 3
				}); */
			},
			clickImg() {
				console.log('getCu	rrentPages', getCurrentPages())
				/* uni.navigateBack({
				    delta: 3
				}); */
			},
			/* 改变类型 */
			changeType(e) {
				this.listType = e.currentTarget.dataset.type;
				this.page = 1;
				this.getList();
			},
			/* 获取列表 */
			getList() {
				if (this.page == 1) {
					uni.showLoading({
						title: "请稍后",
						mask: true
					})
				}
				new Promise((success, error) => {
					/* 此处为数据，请自行修改 */
					let getImgs = () => {
						return this.imgList;
					}

					setTimeout(() => {
						success(getImgs())
					}, 500);
				}).then((data) => {
					uni.hideLoading();
					console.log('page', this.page)
					console.log('data', data)
					if (this.page == 1) {
						/* 关闭切换效果 */
						this.duration = 0;
						this.$nextTick(() => {
							this.dataList = data;
							/* 切换到轮播第0个 */
							this.activeIndex = 0;
							this.$nextTick(() => {
								/* 恢复切换效果 */
								this.duration = 300;
							})
						});
					} else {
						this.dataList = [...this.dataList, ...data];
					}
					this.page++;
					console.log('dataList', this.dataList)
				});
			},
			/* 打开转发 */
			forward() {
				console.log('转发')
				this.$refs.popupShare.close()
				this.$refs.popupForward.open()
			},
			/* 关闭转发 */
			closeForward() {
				this.$refs.popupForward.close()
			},
			openWX() {
				this.$refs.popupShare.close()
				this.$refs.popupWX.open()
			},
			/* 关闭微信分享 */
			closeWX() {
				this.$refs.popupWX.close()
			},
			/* 微信分享 */
			weixin() {
				this.$refs.popupShare.close()
				this.$refs.popupWX.open()
				const downloadTask = uni.downloadFile({
					url: this.imgList[this.commentIndex].img_url, //图片路径
					success: (res) => {
						if (res.statusCode === 200) {
							this.down = false
							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath,
								success: function() {
									console.log('下载成功');
								}
							});
							this.downShare = 0
						}
					}
				})
				downloadTask.onProgressUpdate((res) => {
					this.downShare = res.progress
					console.log('下载进度', this.downShare)
					if (this.downShare == 100) {
						this.$refs.popupWX.close()
						uni.share({
							provider: "weixin",
							scene: "WXSceneSession",
							type: 2,
							imageUrl: this.imgList[this.scrollIndex].img_url,
							success: function(res) {
								this.$refs.popupWX.close()
								uni.hideLoading()
								console.log("success:" + JSON.stringify(res));
							},
							fail: function(err) {
								this.$refs.popupWX.close()
								uni.hideLoading()
								console.log("fail:" + JSON.stringify(err));
							}
						});
					}
				});
			},
			/* 切换监听 */
			onChange(e) {
				console.log('监听图片', e)
				var index = e.detail.current;
				if (index % this.imgList.length == 0) {
					console.log('余数', index)
					this.num = index
				}
				if (index == this.num - 1) {
					this.num = this.num - this.imgList.length
					console.log('余数', this.num)
				}
				console.log('index', index)
				console.log('num', this.num)
				console.log('index-onChangeNum', index - this.num)
				/* uni.setStorageSync('num',index-this.num) */
				this.scrollIndex = index - this.num
				let resData = {
					page: this.pages,
					pagesize: this.pagesize,
					video_id: this.imgList[index - this.num].video_id
				}
				this.$api.apiPost('user/video.Lists/listsReply', resData).then(res => {
					const DATA = res.data
					if (DATA.code == 200) {
						console.log('评论列表', DATA.data.data)
						for (var i = 0; i < DATA.data.data.length; i++) {
							this.commentData.push(DATA.data.data[i])
						}
					} else {
						this.commentData = []
					}
				})
				this.activeIndex = index;
				if (index == this.dataList.length - 1) {
					console.log("add data");
					this.getList();
				}
			},
			/*
			 * 打开私信
			 */
			onOpenContactClick() {
				let data={
					type:'image',
					img_url:this.imgList[this.commentIndex].img_url
				}
				
				uni.navigateTo({
					url: "/pages/album/album-mail?data=" + JSON.stringify(data)
				})
			},
			upper: function(e) {
				console.log(e)
			},
			lower: function(e) {
				console.log('滚动2', e.type)
				if (e.type == 'scrolltolower') {
					this.pages++
					console.log('pages',this.pages);
					this.commentList(this.commentIndex)
				}
			},
			scroll: function(e) {
				console.log('滚动', e.type)
				console.log(e)
				if (e.type == 'scrolltolower') {
					this.pagesize + 8
				}
				this.old.scrollTop = e.detail.scrollTop
			},
			goTop: function(e) {
				// 解决view层不同步的问题
				this.scrollTop = this.old.scrollTop
				this.$nextTick(function() {
					this.scrollTop = 0
				});
				uni.showToast({
					icon: "none",
					title: "纵向滚动 scrollTop 值已被修改为 0"
				})
			},
			/* 更多回复 */
			moreReport(index) {
				console.log(index)
				if (this.commentData[index].readShow == true) {
					this.commentData[index].readShow = false
				} else {
					this.commentData[index].readShow = true
				}
				console.log(this.commentData[index].readShow)
			},
			/* 头部返回按钮 */
			TopBack() {
				console.log('返回')
				uni.navigateBack({
					delta: 1
				});
			},
			/* 相片描述展开 */
			photoDesOpen(item){
				console.log(item.title);
				/* 相片描述展开内容 */
				this.photoDesOpenTitle = item.title
				this.$refs.popupOpen.open()
			},
			/* 相片描述展开关闭 */
			photoDesClose(){
				this.$refs.popupOpen.close()
			},
			/* 回复输入框获取焦点 */
			smallKey(e){
				this.commentHeight = this.commentHeight - (e.detail.height + 300)
			},
			/* 回复输入框失去焦点 */
			smallKey2(e){
				this.commentHeight = 960
				this.inpblu1 = true
				this.inpblu2 = false
				this.inpblu3 = false
				
			},
			smallKey3(e){
				this.commentHeight = this.commentHeight - (e.detail.height + 300)
			},
			/* 回复输入框失去焦点 */
			smallKey4(e){
				this.commentHeight = 960
				this.inpblu1 = true
				this.inpblu2 = false
				this.inpblu3 = false
				this.commentInput = 2
			},
			smallKey5(e){
				this.commentHeight = this.commentHeight - (e.detail.height + 300)
			},
			/* 回复输入框失去焦点 */
			smallKey6(e){
				this.commentHeight = 960
				this.inpblu1 = true
				this.inpblu2 = false
				this.inpblu3 = false
				this.commentInput = 3
			},
			person(item){
				console.log('item',item);
				uni.navigateTo({
					url: '/pages/school/my-center?user_id='+item.user_id,
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.num {
		color: #FFFFFF;
		opacity: 1;
		text-align: center;
		margin: 20rpx 0 20rpx 0;
	}

	.progress {
		background-color: #FFFFFF;
		opacity: 1;
		width: 280rpx;
		height: 20rpx;
		margin: 0 auto;
		border-radius: 20rpx;
	}

	.progress view {
		height: 20rpx;
		background-color: #00D5A2;
		border-radius: 20rpx;
	}

	.dowmPros {
		width: 304rpx;
		height: 120rpx;
		top: 608rpx;
		margin: 0 113px;
		position: absolute;
		background-color: #333333;
		border-radius: 8rpx;
		opacity: 0.5;
		z-index: 1000;
	}

	/deep/ .uni-input-placeholder {
		color: #C0C4CC;
		font-size: 24rpx;
		font-weight: bold;
	}

	/deep/ .uni-input-placeholder .input-placeholder {
		margin-left: 30rpx;
	}

	/deep/ .uni-input {
		height: 80rpx;
	}

	@import "../../lib/global.scss";

	page {
		// background-color: #76beff;
	}

	page,
	.swiper,
	.swiper-item {
		height: 100%;
	}

	.down {
		text-align: center;
	}

	.downImg {
		width: 100rpx;
		height: 100rpx;
		text-align: center;
	}

	.share {
		background-color: #fff;
		height: 102rpx;
		align-items: center;
		border-top-right-radius: 10rpx;
		border-top-left-radius: 10rpx;
		text-align: right;
	}

	.fle {
		margin-top: 25rpx;
		background-color: #00ACFE;
		text-align: right;
	}

	.flex-item {
		width: 100%;
		//height: 100rpx;
		text-align: center;
		line-height: 100rpx;
	}

	.flex-item-V {
		border: 1upx solid #DADADA;
		width: 100%;
		//height: 150rpx;
		text-align: center;
		line-height: 150rpx;
		border: 0rpx;
	}

	/* 标题栏 */
	.title {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: auto;
		padding-top: var(--status-bar-height);
		z-index: 10;
		background-color: rgba(255, 255, 255, 0.08);
		box-shadow: 0 0 20rpx rgba(255, 255, 255, 0.08);

		&>view {
			height: 88rpx;
		}

		.box1 {
			width: 100rpx;
			margin: 0 40rpx;
			font-size: 40rpx;
		}


		.tab {
			&>view {
				margin: 0 30rpx;
				line-height: 64rpx;
				font-size: 32rpx;
				position: relative;
				color: rgba(255, 255, 255, 0.5);
				letter-spacing: 4rpx;

				&.active {
					color: rgba(255, 255, 255, 1);

					&:after {
						content: '';
						display: block;
						height: 4rpx;
						position: absolute;
						width: 70%;
						background-color: #fff;
						border-radius: 2rpx;
						left: 15%;
						bottom: 0;
					}
				}
			}
		}
	}

	.swiper .swiper-item {
		position: relative;
		background: #FFFFFF;
		overflow: hidden;

		&>image:nth-child(1) {
			display: block;
			width: 100%;
			height: 100%;
			box-sizing: content-box;
			padding: 80rpx 60rpx;
			position: absolute;
			z-index: 1;
			top: -80rpx;
			left: -60rpx;
			filter: blur(40rpx);
		}

		&>image:nth-child(2) {
			display: block;
			width: 100%;
			height: 100%;
			position: absolute;
			z-index: 2;
			top: 0;
			left: 0;
		}

		/* 添加阴影遮罩，增强文字显示 */
		&:after {
			content: '';
			display: block;
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 65%;
			z-index: 3;
			background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
		}
	}

	.info-box {
		position: absolute;
		bottom: 80rpx;
		left: 50rpx;
		z-index: 4;
		color: #fff;
		width: 580rpx;
		&>view {
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}

	.sidebar {
		position: absolute;
		bottom: 100rpx;
		right: 50rpx;
		z-index: 5;
		color: #fff;
		text-align: center;

		.pic {
			margin-bottom: 20rpx;

			&>image {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				border: #fff solid 2rpx;
			}
		}

		.like {
			font-size: 72rpx;
			margin-bottom: 20rpx;

			&>view {
				font-size: 20rpx;
				margin-top: 0;
			}
		}

		.read {
			font-size: 64rpx;
			margin-bottom: 80rpx;

			&>view {
				font-size: 20rpx;
				margin-top: -6rpx;
			}
		}

		.menu {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
			border: rgba(0, 0, 0, 0.5) solid 14rpx;
			box-sizing: border-box;

			&>image {
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}
		}

		/* 按钮点击缩放效果 */
		&>view {
			transition: transform 0.05s ease 0s;

			&:active {
				transform: scale(0.95, 0.95);
			}
		}
	}

	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
	}

	.scroll-view-item {
		height: 960rpx;
		text-align: center;
		font-size: 36rpx;
	}

	.scroll-view-item_H {
		display: inline-block;
		width: 100%;
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
		font-size: 36rpx;
	}

	.fanhui {
		margin: 70rpx 0 0 0;
		z-index: 999;
		position: absolute;
		color: #FFFFFF;
		width: 80rpx;
		height: 100rpx;
		text-align: center;
		line-height: 100rpx;
	}

	.WXshare {
		width: 20%;
		height: 20rpx;
		background-color: #00D5A2;
		border-radius: 20rpx;
	}

	.WXshares {
		width: 630rpx;
		height: 20rpx;
		background-color: #FAFAFA;
		margin: 0 auto;
		margin-top: 40rpx;
		border-radius: 20rpx;
	}

	.WXshareNum {
		margin: 0 auto;
		margin-top: 30rpx;
	}

	.imgTitle {
		margin-left: 20rpx;
	}

	.imgHead {
		width: 88rpx;
		height: 88rpx;
		border-radius: 100rpx;
	}

	.commentip {
		background-color: #F2F9FF;
		margin: 20rpx;
		border-radius: 15rpx;
	}

	.commentNumb {
		-webkit-flex: 1;
		flex: 1;
		text-align: center;
		font-size: 28rpx;
		color: #333333;
		font-weight: bold;
	}

	.closeShare {
		-webkit-flex: 1;
		flex: 1;
		margin-right: 30rpx;
	}

	.iconcuo {
		color: #DCDFE6;
		font-size: 40rpx;
		background-color: #F4F7FC;
		border-radius: 100rpx;
	}

	.moreComment {
		color: #00D5A2;
		font-size: 20rpx;
		font-weight: bold;
		text-align: left;
		margin-left: 18rpx;
		margin-bottom: 32rpx;
	}
	
	.dess{
		display: flex;
	}
	
	.dess view:first-child{
		margin-top: 16rpx;
		color: #FFFFFF;
		font-size: 20rpx;
		text-align: left;
		overflow: hidden;
		width: 580rpx;
	}
	
	.imgDes {
		margin-top: 16rpx;
		width: 60rpx;
		margin-left: 10rpx;
		font-size: 20rpx;
		color: #C0C4CC;
		font-weight: bold;
	}
	
	.openDes{
		background-color: #FFFFFF;
		align-items: center;
		text-align: left;
		padding: 0 20rpx 40rpx 20rpx;
	}
	
	.sendBtn{
		margin-top: 18rpx;
		width: 120rpx;
		margin-right: 30rpx;
		color: #FFFFFF;
		font-size: 28rpx;
		font-weight: bold;
		height: 80rpx;
		line-height: 80rpx;
		padding-left: 10rpx;
		padding-right: 10rpx;
		background-color: #00D5A2;
		border-radius: 40rpx;
	}
	
	.Descroll{
		display: flex;
	}
</style>
